<template>
  <div style="height:45%;width:100%;position: absolute;top:20px;">
    <div class="accumIncome" style="height:100%;width:100%;"></div>
  </div>
</template>
 <script>
export default {
  name: "accumIncome",
  data(){
    return{
      myChart:null
    }
  },
 props: {
   accumIncomeData: {
     type: Object,
     default: () => {
       return {};
     }
   }
 },
 watch:{
   accumIncomeData(val){
   var minData = Math.min.apply(null, val.yAxis);
   var maxData = Math.max.apply(null, val.yAxis);
   this.getPie(val,minData,maxData);
   }
 },
  created() {
    this.$eventHub.$on('incomBarDataZoom',this.dataZoomFun)
  },
  mounted(){
     this.myChart = this.$echarts.init(document.querySelector(".accumIncome"));
     var minData = Math.min.apply(null, this.accumIncomeData.yAxis);
     var maxData = Math.max.apply(null, this.accumIncomeData.yAxis);
      this.getPie(this.accumIncomeData, minData,maxData);
    },
  beforeDestroy() {
    this.$eventHub.$off('incomBarDataZoom',this.dataZoomFun)
  },
  methods: {
    getPie(val,minData,maxData) {
      console.log(val)
      console.log(minData)
      console.log(maxData)
      let absValMax = Math.abs(minData) > Math.abs(maxData) ? Math.abs(minData) : Math.abs(maxData)
      const that = this;
      let option = {
          tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
                },
                formatter: '{b} <br /> {a0}: {c0}'+ "%"
              },
        grid: {
          top:'40px',
          left: "60px",
          right: "50px",
          bottom:'22px',
         },
          legend: {
                 data: ['当月完成', '年累计收入同比'],
                 right : '0',
                 top:'0',
             },
         xAxis: {
           type: 'category',
           data:val.xAxis,
           axisTick:{
             show:false,
           },
           axisLabel: {
             show:false,
             // rotate:40 ,
           },
           axisLine:{
             onZeroAxisIndex:1,
             lineStyle: {
               color: '#9399b6',
               opacity:0,
             },
           }
          },
        yAxis: [
          {
              type: 'value',
            axisLine:{ //y轴
              show:true,
              lineStyle:{
                color:'#9399b6',
              },
            },
          },
              {
                  type: 'value',
                // boundaryGap: [0,1],
                  min:-Math.ceil(absValMax),
                  max:Math.ceil(absValMax),
                  splitLine:{show: false,
                  lineStyle:{
                      type: 'dashed'
                  }
                  },  //去除网格线
                  axisLabel: {
                      formatter: '{value} %',
                      show:true
                  },
                  axisTick:{ //y轴刻度线
                      show:false
                  },
                  axisLine:{ //y轴
                      show:true,
                      lineStyle:{
                        color:'#9399b6',
                      },
                  },
              },
            ],
        dataZoom: [
          {
            show: false,
            // start:0,
            // end: 20,
            startValue:val.xAxis.length - 12 ,
            endValue: val.xAxis.length - 1
          }
        ],
        series: [
          {
              type: "bar",
              name: '当月完成',
              // data: [0],
              barWidth :20,
              color:'#7f92f7',
              itemStyle:{
                  emphasis: {
                       barBorderRadius: 30
                    },
                 color: '#9399b6',
                 normal:{
                 barBorderRadius:[10, 10, 0, 0],
                  label: {
                      show: true,
                      position: 'top',
                      textStyle: {
                         color: '#9399b6'
                       },
                   }
              }
          },
            },
          {
            type: "line",
             name: '年累计收入同比',
            smooth: true,
             data:val.yAxis,
            yAxisIndex: 1,
            symbolSize: 10,
            lineStyle: {
               normal: {
                   color: "#fbb858", // 线条颜色
               }
            },
            itemStyle : {
              normal: {
                color: '#fbb858',
                label : {
                  show: true,
                  position: 'top',
                  textStyle: {
                     color: '#e8a039'
                   },
                    formatter:"{c}%",
                  },
               },
            },
          },
      ],
      };
      this.myChart.setOption(option);
    },
    dataZoomFun(params){
      // console.log(params)
      this.myChart.dispatchAction({
        type: 'dataZoom',
        start:params.start,
        end:params.end,
        startValue:params.startValue,
        endValue:params.endValue,
      })
    }
  },
};
 </script>

 <style>
 </style>
